<!DOCTYPE html>
<html lang="en">
<head>
    <title>佳怡供应链金融</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
  <!-- <link rel="stylesheet" href="css/zui.css"> -->
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="demos/css/demos.css">
    <link rel="stylesheet" href="font/fontscss/iconfont.css">
    <link rel="stylesheet" href="css/common.css">

    <style type="text/css">
        .weui-cells{
        	top : 1.9rem;
            /*margin-bottom: 15%;*/
        }
        .weui-cells_checkbox .weui-cell__hd{
            width: 8%;
            float: left;
        }
        .weui_cells .weui-row{
            background: #fff;
        }

        .detailcen{
            padding: 0 15px 10px;
            background: #fff;
        }
        .detailcen .weui-col-70{
            float: left;
            box-sizing: border-box;
            width: 70%;
        }
        .input_left{
            position: relative;
            width: 90%;
            height: 45px;
            border: 1px solid #dcdcdc;
            border-radius: 3px;
        }
        .input_left span{
            position: absolute;
            line-height: 30px;
            left: 10px;
            top: 8px;
            font-size: 18px;
            color: #333;
        }
        .input_left .weui-col-50 input{
            color: #333;
            width: 100%;
            padding-left: 35px;
            height: 45px;
            border: none;
            box-sizing: border-box;
            line-height: 35px;
            font-size: 18px;
            border-right: 1px solid #dcdcdc;
        }
        .input_left .weui_btn_default{
            background: #fff;
            color: #fd8838;
            font-size: 1em;
            height: 45px;
            line-height: 45px;
            box-sizing: border-box;
        }
        .detailcen .weui-col-30{
            float: left;
            box-sizing: border-box;
            width: 30%;
        }
        .input_right input{
            border-radius: 4px;
            height: 45px;
            line-height: 45px;
            box-sizing: border-box;
        }
        .detailcen .last_money{
            font-size: 14px;
            color: #FB5858;
            padding-top: 10px;
        }
        .content-padded .weui_article{
            background: #fff;
        }


        .content-padded .weui_article section{
            margin-bottom: 0;
            width: 100%;
        }
        .approve_list{
            background: #fafafa;
            width: 100%;
            border: 1px solid #e6e6e6;
            list-style: none;
            margin-top: 15px;
        }
        .approve_list li{
            border-bottom: 1px solid #e6e6e6;
            padding: 10px 15px;
            font-size: 16px;
        }
        .weui-form-preview__ft{

            margin-bottom: 2.5rem;

        }
        .icon_back{
        	position: absolute;
			left: -1rem;
			top: 0.9rem;
			width: 0.5rem;
			height: 1.0rem;
			background: url(./images/icon-back.png);
			background-size: 0.5rem 1em;
			vertical-align: middle;        
        }
        .p{
        	font-family: PingFangSC-Regular;
    		color: #FFFFFF;
    		letter-spacing: 0;
        }
        ul{
        	margin: 0;
		    padding: 0;
		    list-style: none;
        }
        ul li p{
        	color: #111111;
        }
        #project li{
        	height: 6rem;
    		/* padding-left: 2rem; */
    		border-bottom: 1px solid #ececec;
        }
        .cir{
   			width: 0.7rem;
    		height: 0.7rem;
    		border: 2px solid #979797;
    		border-radius: 10rem;
        }
        .pro_right{
        	position: absolute;
   			right: 2rem;
   			margin-top: 1rem;
        }
        .pro_left{
        	position: absolute;
   			left: 2rem;
   			margin-top: 1rem;
        }
       /*  .squ{
        	position: absolute;
		    margin: 0.18rem;
		    width: 0.2rem;
		    height: 0.2rem;
		    border: 2px solid #979797;
		    border-radius: 30%;
        } */
        .pint_money{
        	width: 100%;
		    height: 2.1rem;
		    /* background: #ffffff; */
		    border-top: 1px solid #ff9413;
		    /* border-bottom: 1px solid #ff9413; */
		    position: fixed;
		    bottom: 0;
		    z-index: 1000;
		    background: rgb(249, 145, 94);
        }
        .money_but{
        	display: block;
		    width: 30%;
		    height: 100%;
		    font-size: 0.3rem;
		    text-align: center;
		    line-height: 0.84rem;
		    background: #c4c2c2;
		    color: white;
		    float: left;
        }
        i.icon.icon-next {
		    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
		    background-size: 100% 100%;
		}
		i.icon.icon-prev {
		    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
		    background-size: 100% 100%;
		}
		i.icon.icon-prev {
		    width: 0.15rem;
		    height: 0.15rem;
		}
		i.icon.icon-next {	
		    width: 0.15rem;
		    height: 0.15rem;
		}
		.timeul{
			text-align: center;
			line-height: 1.5em;
			height: 5rem;
			border-bottom: 1px solid #ececec;
		}
		.timeul li{
			width: 50%;
    		padding-top: 0%;
    		font-size: 14px;
		}
		input{
		    width: 75% !important;
			text-align: center;
			color: #111111;
		}
		.open-popup:after {
			content: "";
			display: inline-block;
			height: 6px;
			width: 6px;
			border-width: 2px 2px 0 0;
			border-color: #c8c8cd;
			border-style: solid;
			-webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
			transform: matrix(.71, .71, -.71, .71, 0, 0);
			position: relative;
			top: -2px;
			position: absolute;
			top: 50%;
			right: 15px;
			margin-top: -4px;
		}

		.open-popup:active {
			background-color: #ececec;
		}

		.itemtop {
			font-size: 16px;
			margin-bottom: 0.5rem;
			margin-top: 0.5rem;
		}

		.itemtop span {
			border-left: 6px solid #FF9461;
			padding-left: 1rem;
			margin-top: 0.2rem;
			margin-left: 1rem;
		}

		span {
			width: 24%;
			display: inline-block;
			margin-left: 1rem;
		}

		.itembommon {
			line-height: 1.0rem;
		}

		.itembommon .content {
			color: #FF9461;
			font-size: 14px;
		}

		.itembommon .content-title {
			color: #A2A2A2;
			font-size: 14px;
		}

		#project {
			margin-top: 0.3rem;
		}

	</style>
	<script src="lib/jquery-2.1.4.js"></script>
	<script type="text/javascript">
		var json;
		var surs=0;
		var index;
		var pro_mon=0;
		var year=0;
		$(function(){
			var info=localStorage.getItem("pro_info");
			console.log(info);
			$.ajax({
				url:"productRelease/getInvest",
				data:{ids:info},
				success:function(msg){
					json=JSON.parse(msg);
					console.log(json);
					pro_mon=0;
					for(var i=0;i<json.length;i++){
						surs+=parseFloat(json[i].yield);
						pro_mon+=parseFloat(json[i].money);
						// data-target="#half"
						/*$("#project").append('<li  class="open-popup" onclick="setProMon(this,1)"><span class="pro_left" id="n'+json[i].id+'">'+json[i].product_name+'</span><span class="pro_right" id="m'+json[i].id+'">￥'+json[i].money+'</span></li>');*/
                        var str = "";
/*
                        str += "<li class=\"open-popup\" data-id=\""+json[i].id+"\" onclick=\"setProMon(this,1,"+json[i].money+")\">"
*/
                        str += "<li class=\"open-popup\" data-id=\""+json[i].id+"\" >"
                        str += "    <div class=\"itemtop\">"
                        str += "    <span>" + json[i].product_name + "</span>"
                        str += "    </div>"
                        str += "    <div class=\"itembommon\">"
                        str += "   <div class=\"content-title\">"
                        str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">年化收益率</span>"
                        str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">投资金额</span>"

                        str += "    </div>"
                        str += "   <div class=\"itembommon\">"
                        str += "   <span style='margin-left: 3.5rem'class=\"leftborder\">" + json[i].yield *100+ "%</span>"
                        str += "   <span style='margin-left: 3.5rem'class=\"leftborder\"  id=\"m"+json[i].id+"\">" + json[i].money + "</span>"
                        str += "     </div>"
                        str += "   <div class=\"\" style='width: 100%'>"
                        str += "    <input type='text' id='touzi"+i+"' placeholder='请输入投资金额，50000元起投' onchange='setProMon(this,"+i+",1,"+json[i].money+")' style='height: 30px;margin-left: 10%'>"
                        str += "    </div>"
                        str += "    </div>"


                        str += "   </li>"

                        $("#project").append(str);

                    }

					$("#total_pri").html(pro_mon+"元");
					$("#surs").html(surs+"%");
					/*setYear();*/
					setPriAndPro();
				}
			});
		});
		function setPriAndPro(){
			console.log(year);	
			$("#one_pri").html(parseFloat(pro_mon*(surs/100)*year));
		}
        function gettouzi(){

        }
		/*function setYear(){
			var st=$("#start_date").val();
			var end=$("#end_date").val();
			var sts=[st.split("年")[0],st.split("年")[1].split("月")[0],st.split("年")[1].split("月")[1].split("日")[0]];
			var ends=[end.split("年")[0],end.split("年")[1].split("月")[0],end.split("年")[1].split("月")[1].split("日")[0]];
			var stdate=new Date(sts[0]+"-"+sts[1]+"-"+sts[2]+" 00:00:00");
			var endate=new Date(ends[0]+"-"+ends[1]+"-"+ends[2]+" 00:00:00");
			year=parseInt((endate-stdate)/(24*60*60*1000)/365);
		}*/
		
		function setProMon(pro,index,type,money){

			//index=$(pro).index();

			var mon=json[index].min_money;
			if(type!=1){
				mon=100;
				index=0;
			}

			/* $.prompt({
	          text: mon+"元起投",
	          title: "输入金额",
	          onOK: function(text) {*/
			var id="touzi"+index;
			var text=$("#"+id).val();
	            if(text>=mon&&text<=money){
		            if(type==1){
						json[index].product_investment_amount=text;
						console.log($("#m"+json[index].id).html());
						$("#m"+json[index].id).html("￥"+json[index].product_investment_amount);
						pro_mon=0;
						for(var i=0;i<json.length;i++){
							pro_mon+=parseFloat(json[i].product_investment_amount);
						}
						$("#total_pri").html(pro_mon);
						setPriAndPro();	
		            }else{
		            	pro_mon=0;
		            	for(var i=0;i<json.length;i++){
							json[i].product_investment_amount=text;
							$("#m"+json[i].id).html("￥"+json[i].product_investment_amount);
							pro_mon+=parseFloat(json[i].product_investment_amount);
						}
						$("#total_pri").html(pro_mon);
						setPriAndPro();
		            }
	            }else{
					$.toast("不可小于"+mon+"且不可大于"+money, "forbidden");
				}
                /* },
	          onCancel: function() {
	            console.log("取消了");
	          },
	          input: json[index].product_investment_amount
	        });*/
		}
	</script>
</head>
 
<body>
<header style="position:fixed;">
    <div class="weui-row weui-no-gutter">
        <div class="weui-col-33" id="back_icon">
        	<a href="javascript:history.go(-1)" class="icon pull-right"><i class="icon_back"></i></a>
        </div>
        <div class="weui-col-33">投资</div>
        <div class="weui-col-33" id="ligin_icon">
            <!-- <a href="login.html" class="icon pull-right"><i class="iconfont icon-wode"></i></a> -->
        </div>
    </div>
</header>
<div class="weui-cells" style="margin-bottom: 4.3rem;">
	<div style="width:100%;background-color: #FF9461;/*position: fixed;*/z-index: 10;">
		<div style="width:100%;height: 4rem;">
			<p class="p" style="font-size: 1em;padding-top:1.7rem;padding-left:40%;" id="pro_name">投资有风险</p>
		</div>
		<div style="height: 7.25rem;text-align: center;">
			<!--<p class="p" style="font-size: 2.25em;" id="one_pri"></p>
			<p class="p" style="ont-size: 12px;opacity: 0.6;">累计收益（元）</p>
			<p class="p" style="padding-top: 1.5rem;font-size: 1em;">投资总额 <span id="total_pri"></span> 元</p>-->
			<p class="p" style="font-size: 14px;">投资总额（元）</p>
			<p class="p" style="padding-top: 1.5rem;font-size: 1em;"><span id="total_pri"></span></p>

		</div>
	</div>
	<div style="background: #FFFFFF;/*margin-top: 12.9rem*/">
			<!--<ul class="timeul">-->
				<!--<li style="display: inline-block;border-bottom: 1px solid #ececec;">
					<div class="weui-cell__bd">
			          <input class="weui-input" id="start_date" type="text"/>
			        </div>
					<p style="font-size: 12px;">投资开始时间</p>
				</li>
				<li style="float: right;border-bottom: 1px solid #ececec;">
					&lt;!&ndash; <p>2019年10月08日</p> &ndash;&gt;
					<div class="weui-cell__bd">
			          <input class="weui-input" id="end_date" type="text"/>
			        </div>
					<p style="font-size: 12px;">投资结束时间</p>
				</li>		-->
				<!--<li style="color: #FF9461;margin: -0.5em"><span class="pro_left">预计年化收益率</span><span style="position: absolute;right: 2rem;margin-top: 1.2rem;" id="surs"></span></li>		-->
			<!--</ul>-->
			<ul id="project">
				<!-- <i class="pro_right cir"><i class="squ"></i></i> -->
			</ul>
	</div>
</div>
<div class="weui-tabbar" style="height: 2.5rem;z-index: 5;" id="butts">
       <!-- <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary open-popup" href="javascript:;" onclick="setProMon(null,2)" data-target="#half">投资金额</button>-->
        <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:;" onclick="sub()">立即投资</button>
</div>
</body>
<script src="js/circleProgress.js"></script>
<script src="js/jquery-weui.js"></script>
<!--script src="js/zui.min.js"></script>-->
<script type="text/javascript">
	(function ($) {
        var token=localStorage.getItem("token");
        var username=localStorage.getItem("username");
        if(token!=null&&username!=null&&token!="undefined"){
            $("#ligin_icon").append('<a href="#" class="icon pull-right">'+username+'</a>');
        }else{
            $("#ligin_icon").append('<a href="login.html" class="icon pull-right"><i class="iconfont icon-wode"></i></a>');
        }
    })(jQuery);
     $(function(){
     	var state_date=format(new Date(),"yyyy年MM月dd日");
     	$("#start_date").calendar({
	        value: [format(new Date(),"yyyy-MM-dd")],
	        dateFormat: 'yyyy年mm月dd日'
     	});
     	$("#start_date").val(state_date);
     	
     	var end_date=new Date();
     	end_date.setFullYear(end_date.getFullYear()+3)
     	$("#end_date").calendar({
	        value: [format(end_date,"yyyy-MM-dd")],
	        dateFormat: 'yyyy年mm月dd日'
     	});
     	$("#end_date").val(format(end_date,"yyyy年MM月dd日"));
     	
     	
     	$("#start_date").change(function(){
     		setYear();
			setPriAndPro();
     	});
     	$("#end_date").change(function(){
     		setYear();
			setPriAndPro();
     	});
     });
     
     function sub(){
     	 $.confirm("您确定要投资吗?", "确认投资?", function() {
         	$.ajax({
	     		url:"productRelease/saveInvest",
	     		type:"post",
	     		data:{json:JSON.stringify(json) ,userid:localStorage.getItem("token"),username:localStorage.getItem("username")},
	     		success:function(msg){
	     			if(msg.suc!=0){
	     				$.toast("投资成功");
				     	localStorage.setItem("pro_info","");
						window.location.href = "touzi.html";				     	
	     			}
	     		}
     		});
         }, function() {
         	
         });
     }
     var format = function(time, format){
	    var t = new Date(time);
	    var tf = function(i){return (i < 10 ? '0' : '') + i};
	    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
	        switch(a){
	            case 'yyyy':
	                return tf(t.getFullYear());
	                break;
	            case 'MM':
	                return tf(t.getMonth() + 1);
	                break;
	            case 'mm':
	                return tf(t.getMinutes());
	                break;
	            case 'dd':
	                return tf(t.getDate());
	                break;
	            case 'HH':
	                return tf(t.getHours());
	                break;
	            case 'ss':
	                return tf(t.getSeconds());
	                break;
	        }
	    })
	}
</script>
<script src="js/web/checkLogin.js"></script>
</html>